<script setup>
    import $ from 'jquery'
    import {ref} from 'vue'

 
    var zhezhao=document.getElementById("zhezhao");
    var login=document.getElementById("login");
    function imgshow(src){
      showit.value =true;
        var large_image = '<img src= '+ src +'></img>';
        $('.image_large').show();
        $('.image_large').html($(large_image).attr("style","display:block;height:90%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;"));
        zhezhao.style.display="block";
        login.style.display="block";
    }
    function hideImg() {
        $('.image_large').hide();
        zhezhao.style.display="none";
        login.style.display="none";
    }
    function bg() {
        $('.image_large').hide();
        zhezhao.style.display="none";
        login.style.display="none";
    }
    var showit = ref(false)
    function toggle(){
      showit.value = !showit.value;
    }


   const imageUrl = ref("../assets/images/avatar02.jpg")
   function showImagePreview(imgsrc) {
      const image = new Image();
      image.src = imgsrc;
      image.onload = () => {
        // 创建弹出层
        const previewContainer = document.createElement('div');
        previewContainer.style.position = 'fixed';
        previewContainer.style.top = 0;
        previewContainer.style.bottom = 0;
        previewContainer.style.left = 0;
        previewContainer.style.right = 0;
        previewContainer.style.backgroundColor = 'rgba(0,0,0,0.8)';
        previewContainer.style.display = 'flex';
        previewContainer.style.justifyContent = 'center';
        previewContainer.style.alignItems = 'center';
        document.body.appendChild(previewContainer);
        // 在弹出层中添加图片
        const previewImage = document.createElement('img');
        previewImage.src = imgsrc;
        previewImage.style.maxWidth = '80%';
        previewImage.style.maxHeight = '80%';
        previewContainer.appendChild(previewImage);
        // 点击弹出层，关闭预览
        previewContainer.addEventListener('click', () => {
          document.body.removeChild(previewContainer);
        });
      };
    }
  

</script>

<template>
  
  <div>
    <div class="zhezhao" id="zhezhao" onclick="bg();"></div>
    <div v-show="showit" class="image_large" onclick="hideImg();" >
      <button @click="toggle()">hidden it</button>
    </div>
    <img src="../assets/images/avatar02.jpg" @click="showImagePreview(imageUrl)" />

    <img src='../assets/images/avatar01.jpg' @click="imgshow('../assets/images/avatar01.jpg')" class="logoImg amplifyImg"/>
  </div>
</template>

<style>
    *
    {
        margin:0px;
        padding:0px;
    }
    .zhezhao
    {
        width:100%;
        height:100%;
        background-color:#000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        opacity:0.8;
        position:absolute;
        left:0px;
        top:0px;
        display:none;
        z-index:4;
    }
</style>